<template>
  <transition name="pay">
    <div class="payment">
      <div class="payment-header">
        <p>{{data.organization}}<span class="detail">详情</span></p>
        <span class="price">{{totalPrice | currency('￥')}}</span>
      </div>
      <div class="line">请选择支付方式</div>
      <section class="payment-choices">
        <ul class="choices-container">
          <li class="single-payment">
            <img class="pic" src="../../../static/img/alipay.png"/>
            <div class="content">
              <span>支付宝</span>
              <label class="choices-radio">
                <input ref="alipay" type="radio" name="choosePayment"/>
                <i class="icon"></i>
              </label>
            </div>
          </li>
          <li class="single-payment">
            <img class="pic" src="../../../static/img/wechatPay.png"/>
            <div class="content">
              <span>微信支付</span>
              <label class="choices-radio">
                <input ref="wechat" type="radio" name="choosePayment"/>
                <i class="icon"></i>
              </label>
            </div>
          </li>
          <li class="single-payment">
            <img class="pic" src="../../../static/img/commonPay.png"/>
            <div class="content">
              <span>通用余额</span>
              <label class="choices-radio">
                <input ref="commonPay" type="radio" name="choosePayment"/>
                <i class="icon"></i>
              </label>
            </div>
          </li>
        </ul>
      </section>
      <div class="payment-footer" @click="comfirm">确认支付{{totalPrice | currency('￥')}}</div>
      <!--<mu-dialog :open="dialog" :title="payway" @close="close">-->
        <!--已支付{{totalPrice | currency('￥')}}-->
        <!--<mu-flat-button slot="actions" @click="close" primary label="取消"/>-->
        <!--<mu-flat-button slot="actions" primary @click="close" label="确定"/>-->
      <!--</mu-dialog>-->
      <error-tip :err-msg="'支付成功'" v-if="dialog"></error-tip>
    </div>
  </transition>
</template>

<script>
    import ErrorTip from "../errorTip/errorTip";
    import {ERR_OK} from "../../api/config";
    import {createOrder} from "../../api/ajax";
    import {mapMutations} from 'vuex';

    export default {
      components: {ErrorTip},
      name: "payment",
      props: {
        data: {
          type: Object,
          default: null
        }
      },
      data () {
        return {
          foods: [],
          dialog: false,
          alertText: ''
        }
      },
      mounted () {
        setTimeout(() => {
          this.getselectedFood()
        }, 20)
      },
      methods: {
        getselectedFood () {
          let selectedfoods = window.localStorage.getItem('selectedFoods')
          if (!selectedfoods) {
            return
          }
          this.foods = JSON.parse(selectedfoods)
        },
        open () {
          this.dialog = true
        },
        close () {
          this.dialog = false
        },
        comfirm () {
          if (this.$refs.alipay.checked) {
            this.alertText = '支付宝支付'
          } else if (this.$refs.wechat.checked){
            this.alertText = '微信支付'
          } else if (this.$refs.commonPay.checked) {
            this.alertText = '余额支付'
          } else {
            return
          }
          let obj = Object.assign({},this.data,{
            'paid': 1,
            'payment': this.alertText,
            'ordertime': new Date().getTime()
          })
          createOrder(obj).then((res) => {
            let response = res.data
            if (response.code === ERR_OK) {
              this.alertText = response.msg
              this.dialog = true
              this.setNewMsgNum(1)
              setTimeout(() => {
                this.alertText = ''
                this.dialog = false
                this.$router.push('/home')
              }, 1000)
            } else {
              this.alertText = response.msg
              this.dialog = true
              setTimeout(() => {
                this.alertText = ''
                this.dialog = false
              }, 1000)
            }
          }).catch((err) => {
            this.alertText = '请检查网路'
            this.dialog = true
            setTimeout(() => {
              this.alertText = ''
              this.dialog = false
            }, 1000)
          })
        },
        ...mapMutations({
          setNewMsgNum: 'SET_NEW_MSG_NUM',
        })
      },
      computed: {
        totalPrice() {
          let total = 0
          if (this.data) {
            total = this.data.price
          }
          // if (!this.foods) {
          //   return
          // }
          // this.foods.forEach((food) => {
          //   total += (food.count*food.price)
          // })
          return total
        }
      },
      watch: {
        '$route': 'getselectedFood'
      }
    }
</script>

<style scoped>
  .pay-enter-active, .pay-leave-active {
    transition: all 0.3s;
  }
  .pay-enter, .pay-leave-to {
    transform: translate3d(100%, 0, 0);
  }
  .payment{
    position: fixed;
    top: 90px;/*rem*/
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background-color: #efeff4;
  }
  .payment .payment-header{
    font-size: 26px;/*px*/
    line-height: 90px;/*rem*/
    background-color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 20px;/*rem*/
  }
  .payment .payment-header p{
    flex: 1;
  }
  .payment .payment-header p .detail{
    color: #9a9a9a;
    margin-left: 10px;/*rem*/
  }
  .payment .payment-header .price{
    color: #ec6045;
  }
  .payment .line{
    font-size: 24px;/*px*/
    color: #6e6e6e;
    line-height: 70px;/*rem*/
    padding: 0 40px;/*rem*/
  }
  .payment .payment-choices{
    background-color: #ffffff;
    padding-left:40px;/*rem*/
  }
  .payment .payment-choices .choices-container{

  }
  .payment .payment-choices .choices-container .single-payment{
    display: flex;
    align-items: center;
    line-height: 90px;/*rem*/
  }
  .payment .payment-choices .choices-container .single-payment .pic{
    height: 46px;/*rem*/
    width: 46px;/*rem*/
    margin-right: 40px;/*rem*/
  }
  .payment .payment-choices .choices-container .single-payment .content{
    font-size: 28px;/*px*/
    display: flex;
    align-items: center;
    flex: 1;
    border-bottom: 1px solid #f9f9f9;
    padding-right: 36px;/*rem*/
  }
  .payment .payment-choices .choices-container .single-payment .content span{
    flex: 1;
  }
  .choices-radio{
    position: relative;
  }
  .choices-radio input{
    opacity: 0;
    position: absolute;
    width: 50px;/*rem*/
    height: 50px;/*rem*/
    top:0;
    /*transform: translateY(50%);*/
  }
  .choices-radio input:checked~.icon{
    background-image: url("../../../static/img/choosed.png");
  }
  .choices-radio .icon{
    display: block;
    width: 50px;/*rem*/
    height: 50px;/*rem*/
    background: url("../../../static/img/choose.png") center center no-repeat;
    background-size: 100% 100%;
  }
  .payment-footer{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    background-color: #76d672;
    line-height: 80px;/*rem*/
    color: #ffffff;
    font-size: 28px;/*px*/
  }
</style>
